<template>
  <el-card class="user-profile-card">
    <div slot="header" class="card-header">
      <span class="header-title">用户信息</span>
    </div>

    <div class="profile-container">
      <!-- 头像及基础信息 -->
      <div class="avatar-section">
        <pan-thumb :image="user.avatar" class="user-avatar" :height="'120px'" :width="'120px'">
          <div>
            <div>状态</div>
            {{ user.role }}
            <el-tag :type="user.status ? 'success' : 'danger'" class="status-badge">
              {{ user.status ? '正常' : '停用' }}
            </el-tag>
          </div>
        </pan-thumb>
        <div class="base-info">
          <h2 class="user-name">{{ user.name }}</h2>
          <div class="meta-info">
            <span class="username">@{{ user.username }}</span>
            <el-divider direction="vertical" />
            <span class="role-tag">
              <el-tag type="info">{{ user.roleName }}</el-tag>
            </span>
          </div>
        </div>
      </div>

      <!-- 详细信息 -->
      <el-divider content-position="center"><i class="el-icon-info" /> 详细信息</el-divider>
      <div class="detail-grid">
        <div class="detail-item">
          <label>所属部门</label>
          <div class="content">{{ user.deptName || '-' }}</div>
        </div>
        <div class="detail-item">
          <label>工作岗位</label>
          <div class="content">{{ user.postName || '-' }}</div>
        </div>
        <div class="detail-item">
          <label>手机号码</label>
          <div class="content">{{ user.phone || '-' }}</div>
        </div>
        <div class="detail-item">
          <label>电子邮箱</label>
          <div class="content">{{ user.email || '-' }}</div>
        </div>
      </div>

      <!-- 描述信息 -->
      <el-divider content-position="center"><i class="el-icon-document" /> 个人描述</el-divider>
      <div class="description-section">
        <el-empty v-if="!user.description" description="暂无描述" :image-size="60" />
        <div v-else class="description-content">
          {{ user.description }}
        </div>
      </div>
    </div>
  </el-card>
</template>


<script>
import PanThumb from '@/components/PanThumb'

export default {
  components: { PanThumb },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: '',
          avatar: '',
          username: '',
          status: 1,
          roleName: '',
          deptName: '',
          postName: '',
          phone: '',
          email: '',
          description: ''
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user-profile-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  .card-header {
    .header-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
}

.profile-container {
  padding: 20px;

  .avatar-section {
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    .user-avatar {
      position: relative;

      ::v-deep .pan-thumb {
        border: 3px solid #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
      }

      .status-badge {
        position: relative;
        bottom: -8px;
        font-weight: bold;
      }
    }

    .base-info {
      margin-left: 30px;

      .user-name {
        font-size: 24px;
        margin: 0 0 8px 0;
        color: #333;
      }

      .meta-info {
        display: flex;
        align-items: center;

        .username {
          color: #666;
          font-size: 14px;
        }

        .role-tag {
          margin-left: 10px;
        }
      }
    }
  }

  .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    padding: 15px 0;

    .detail-item {
      background: #f8f9fa;
      border-radius: 6px;
      padding: 16px;

      label {
        display: block;
        color: #909399;
        font-size: 12px;
        margin-bottom: 6px;
      }

      .content {
        color: #333;
        font-size: 15px;
        font-weight: 500;
        word-break: break-all;
      }
    }
  }

  .description-section {
    padding: 15px 0;
    min-height: 80px;

    .description-content {
      line-height: 1.6;
      color: #666;
      white-space: pre-wrap;
    }
  }
}

.el-divider {
  ::v-deep .el-divider__text {
    background: transparent;
    font-size: 14px;
    color: #666;
  }
}
</style>
